<!-- 多头借贷风险 -->
<template>
	<view class="card d-flex">
		<view class="card_head relative d-flex mb-30">
			<text class="card_head_title relative">多头借贷风险</text>
		</view>

		<view class="card_content d-flex mb-20">

			<view class="card_item d-flex">
				<view class="card_item_head d-flex mb-50">
					<text class="card_item_head_title bold relative">放款机构</text>
					<text class="card_item_head_describe">此部分数据来源于大数据分析</text>
				</view>

				<view class="card_item_list d-flex mb-30">
					<text class="card_item_list_txt">放款机构数：</text>
					<text class="card_item_list_val color2 bold">{{ info?.xyp_cpl0001 || 0 }}家</text>
				</view>

				<view class="card_item_list d-flex mb-30">
					<text class="card_item_list_txt">消费金融类机构数（有场景的、分期）：</text>
					<text class="card_item_list_val color2 bold">{{ info?.xyp_cpl0007 || 0 }}家</text>
				</view>

				<view class="card_item_list d-flex mb-30">
					<text class="card_item_list_txt">网络贷款类机构数（现金贷）：</text>
					<text class="card_item_list_val color2 bold">{{ info?.xyp_cpl0008 || 0 }}家</text>
				</view>
			</view>

			<uv-divider :dashed="true"></uv-divider>

			<view class="card_item d-flex">
				<view class="card_item_head d-flex mb-50">
					<text class="card_item_head_title bold relative">贷款整体情况</text>
				</view>

				<view class="info d-flex">
					<view class="info_item d-flex">
						<text class="info_item_label info_item_txt">贷款已结清机构数</text>
						<text class="info_item_val info_item_txt">{{ info?.xyp_cpl0002 || 0 }}</text>
					</view>

					<view class="info_item d-flex">
						<text class="info_item_label info_item_txt">贷款时长(天)</text>
						<text class="info_item_val info_item_txt">{{ info?.xyp_cpl0045 || 0 }}</text>
					</view>

					<view class="info_item d-flex">
						<text class="info_item_label info_item_txt">最近一次交易距离当前时间（天）</text>
						<text class="info_item_val info_item_txt">{{ info?.xyp_cpl0046 || 0 }}</text>
					</view>
				</view>

				<uv-divider :dashed="true"></uv-divider>

				<view class="info d-flex">
					<view class="info_item d-flex">
						<text class="info_item_label info_item_txt">累计交易金额</text>
						<text class="info_item_val info_item_txt">{{ info?.xyp_t01aczzzz || 0 }}</text>
					</view>

					<view class="info_item d-flex">
						<text class="info_item_label info_item_txt">交易失败金额（最小值）</text>
						<text class="info_item_val info_item_txt">{{ info?.xyp_t01abzzza || 0 }}</text>
					</view>

					<view class="info_item d-flex">
						<text class="info_item_label info_item_txt">历史贷款机构成功还款笔数</text>
						<text class="info_item_val info_item_txt">{{ info?.xyp_cpl0014 || 0 }}</text>
					</view>
					
					<view class="info_item d-flex">
						<text class="info_item_label info_item_txt">历史贷款机构交易失败笔数</text>
						<text class="info_item_val info_item_txt">{{ info?.xyp_cpl0015 || 0 }}</text>
					</view>
				</view>
			</view>

			<uv-divider :dashed="true"></uv-divider>
			
			<view class="card_item d-flex">
				<view class="card_item_head d-flex mb-50">
					<text class="card_item_head_title bold relative">历史贷款逾期</text>
				</view>
			
				<view class="yq d-flex">
					<view class="yq_item d-flex">
						<text class="yq_item_label mb-20">
							逾期金额
						</text>
						<view class="yq_item_val">
							<text class="bold color2">{{ info?.xyp_cpl0072 || 0 }}</text>
							<text>(元)</text>
						</view>
					</view>
					<view class="yq_item d-flex">
						<text class="yq_item_label mb-20">
							逾期机构
						</text>
						<view class="yq_item_val">
							<text class="bold color2">{{ info?.xyp_cpl0071 || 0 }}</text>
							<text>(个)</text>
						</view>
					</view>
				</view>
			</view>
		
			<uv-divider :dashed="true"></uv-divider>
			
			<view class="card_item d-flex">
				<view class="card_item_head d-flex mb-20">
					<text class="card_item_head_title bold relative">贷款分周期汇总</text>
				</view>
			
				<scroll-view :scroll-x="true" class="card_table d-flex scroll">
					<view class="card_table_item d-flex">
						<text class="card_table_txt label"></text>
						<text class="card_table_txt">贷款机构数</text>
						<text class="card_table_txt">还款成功笔数</text>
						<text class="card_table_txt">还款成功总金额（元）</text>
						<text class="card_table_txt">交易失败笔数</text>
						<text class="card_table_txt">交易失败总金额（元）</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">近1天</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0070 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0017 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0033 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0016 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0032 || 0 }}</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">近7天</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0009 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0019 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0035 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0018 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0034 || 0 }}</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">近14天</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0010 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0021 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0037 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0020 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0036 || 0 }}</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">近21天</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0063 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0064 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0067 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0065 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0066 || 0 }}</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">近30天</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0011 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0023 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0039 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0022 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0038 || 0 }}</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">近90天</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0012 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0025 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0041 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0024 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0040 || 0 }}</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">近180天</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0013 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0027 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0043 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0026 || 0 }}</text>
						<text class="card_table_txt">{{ info?.xyp_cpl0042 || 0 }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="card_content d-flex">
			<view class="tips d-flex mb-10">
				<Icon class="mr-10" name="info-circle" size="28rpx" color="#FF0000" />
				<text class="tips_txt">
					提示：<br />
					【传统银行】：依托线下们门店提供活期存款和商业贷款的金融机构。如中国银行、工商银行、建设银行、农业银行等。<br />
					【网络零售银行】：没有线下网点，不做现金业务、没有分行、没有柜台，轻资产、平台化，以服务小微企业为主的线上银行。例如：微众银行、网商银行等。
				</text>
			</view>
			
			<view class="menu d-flex">
				<view class="menu_icon mr-10" :style="{transform: menu ? 'rotateZ(0deg)' : 'rotateZ(180deg)'}"><Icon name="arrow-up" color="#6642EA" size="20rpx" /></view>
				{{ menu ? '收缩' : '展开' }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, defineProps } from 'vue';
import Icon from '@/components/Icon/index.vue';

const props = defineProps({
	info: {
		type: Object,
		default: () => {}
	}
})

const menu = ref(false)
</script>

<style lang="scss" scoped>
	.card {
		flex-direction: column;

		&_content {
			flex-direction: column;
		}

		&_item {
			width: 100%;
			flex-direction: column;

			&_head {
				align-items: center;
				justify-content: space-between;

				&_title {
					padding-left: 30rpx;
					color: #000;

					font: {
						size: 24rpx;
					}

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						height: 110%;
						width: 6rpx;
						background-color: #6642EA;
						border-radius: 8rpx;
					}
				}

				&_describe {
					color: #6C7282;

					font: {
						size: 24rpx
					}
				}
			}

			&_list {
				align-items: center;

				&_txt {
					color: #6C7282;

					font: {
						size: 26rpx
					}
				}

				&_val {
					font: {
						size: 26rpx
					}
				}
			}
		}
	
		.info {
			flex-direction: column;
			
			&_item {
				padding: 35rpx 50rpx;
				align-items: center;
				justify-content: space-between;
				
				&:nth-of-type(even) {
					background: linear-gradient(to right, #F4F6FF, #FFF5F8);
				}
				
				&_txt {
					color: #6C7282;
					font: {
						size: 24rpx
					}
				}
			}
		}
	
		.yq{
			justify-content: space-between;
			
			&_item {
				flex-direction: column;
				align-items: center;
				
				&_label {
					color: #6C7282;
					font: {
						size: 24rpx
					}
				}
				&_val {
					text {
						&:not(.bold) {
							margin-left: 5rpx;
							color: #6C7282;
							font: {
								size: 24rpx
							}
						}
					}
				}
			}
		}
	
		&_table {
			max-width: 100%;
			flex-direction: column;
			&_txt {
				width: 300rpx;
				// text-align: center;
			}
			&.scroll {
				.card_table_item {
					width: 1500rpx;
					
					.label {
						text-align: left;
						width: 260rpx;
					}
				}
			}
			&_item {
				align-items: center;
				justify-content: space-between;
				
				&:nth-of-type(odd) {
					background: linear-gradient(to right, #F4F6FF, #FFF5F8);
				}
			}
			
			&_txt {
				padding: 30rpx;
				color: #6C7282;
				white-space: nowrap;
				font: {
					size: 26rpx
				}
			}
		}
	}
	
	.tips {
		align-items: baseline;
		transition: .3s;
		&_txt {
			line-height: 45rpx;
			color: #6C7282;
			font: {
				size: 27rpx
			}
		}
	}
	
	.menu {
		margin-left: auto;
		align-items: center;
		color: #6642EA;
		font: {
			size: 25rpx
		}
		
		&_icon {
			transition: .3s;
			padding: 3rpx;
			border-radius: 50%;
			border: 1px solid #6642EA;
		}
	}
</style>